import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { UpOutlined, DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import Sidebar from '@/Sidebar';
const { Sider, Content } = Layout;

const Tools: React.FC = () => {
    const [isCollapsed, setIsCollapsed] = useState(false);
    const [selectedKey, setSelectedKey] = useState('1');

    const toggleCollapse = () => {
        setIsCollapsed(!isCollapsed);
    };

    const handleMenuClick: MenuProps['onClick'] = (e) => {
        setSelectedKey(e.key);
    };

    const menuItems: MenuProps['items'] = [
        {
            key: 'sub1',
            label: '工具类别1',
            children: [
                {
                    key: '1',
                    label: '工具1',
                },
                {
                    key: 'sub1-2',
                    label: '子类别1',
                    children: [
                        {
                            key: '2',
                            label: '工具2',
                        },
                        {
                            key: '3',
                            label: '工具3',
                        },
                    ],
                },
            ],
        },
        {
            key: 'sub2',
            label: '工具类别2',
            children: [
                {
                    key: '4',
                    label: '工具4',
                },
                {
                    key: '5',
                    label: '工具5',
                },
            ],
        },
    ];

    return (
        <div className="tools-container">
            <div className="tools-header" onClick={toggleCollapse}>
                <h2>Tools</h2>
                {isCollapsed ? <DownOutlined /> : <UpOutlined />}
            </div>
            <Layout>
                <Sidebar />
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                    >
                        {/* 根据选中的菜单项显示相应的内容 */}
                        Content for tool {selectedKey}
                    </Content>
                </Layout>
            </Layout>
        </div>
    );
};

export default Tools;
